<template>
    <div class="linkman-container">
        <div class="linkman-title">
            联系人
            <div class="add-btn" @click="addLink()">
                <icon class="icon-plus" name="plus"></icon>
            </div>
        </div>
        <ul class="current-container-ul">
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-group-lt clearfix">
                    <img src="../../assets/friends.png" />
                    <div class="list-group-inner">
                        <p class="list-group-p1">羊羊羊</p>
                        <p class="list-group-p2">0x13fg9f3ag0x23qwsxfgxsxaqwesffgg</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="block-paging">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[8, 16, 24, 32]"
                    :page-size="4"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="32">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            addLink(){
                this.$router.push({path:'/home/addman'})
            }
        },
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
        }
    }
</script>
<style scoped>
    .linkman-container{
        width: 700px;
        height: auto;
        margin: 0 auto;
    }
    .linkman-container .linkman-title{
        text-align: center;
        font-size: 15px;
        padding: 30px 0 20px 0;
        position: relative;
    }
    .add-btn{
        position: absolute;
        top: 25px;
        right: 0;
    }
    .add-btn .icon-plus{
        width: 28px;
        height: 28px;
        color: #ccc;
        cursor: pointer;
    }
    .add-btn .icon-plus:hover{
        color: #0866b1;
    }
    ul,li,p{
        margin: 0;
        padding:0;
    }
    .current-container-ul li{
        border-bottom: 1px #ccc solid;
        padding: 20px 5px 20px 5px;
        cursor: pointer;
    }
    .current-container-ul li:hover{
        background: #f2f2f2;
    }
    .list-group-lt img{
        width: 26px;
        height: 26px;
        float: left;
        margin-right: 15px;
        margin-top: 6px;
    }
    .list-group-inner{
        float: left;
    }
    .list-group-p2,.list-group-p1{
        font-size: 14px;
    }
    .block-paging{
        margin-top: 30px;
    }
</style>